<template>
	<view class="server-container">
		<view class="header-box">
			<image class="full-image" src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0820/8d8b4202508201459474324.png" mode="scaleToFill"></image>
		</view>
		<view class="info-box">
			<view class="tip-txt">检测到你还没有到服务地</view>
			<view class="tip-txt cred">{{address}}</view>
			<view class="msg mt-20">请你在用户位置确认到达</view>
			<!-- <view class="question-box mt-20">
				<view>如果你遇到以下问题</view>
				<view class="cgray">用户地址错误</view>
				<view class="clink">请点击这里解决 ></view>
			</view> -->
			
			<view class="action-box bcr mt-max" @click="onConfirm">
				<view class="cred">仍要确认到达</view>
				<!-- <view class="btn-icon">
				      <image class="arrow" src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0821/327e9202508210911158444.png" ></image>
				</view> -->
			</view>
			
			<view class="action-box bcg mt-30"  @click="onExit">
				<view class="cdark">稍后再说</view>
			</view>
			
			
		</view>
		
		
	</view>
</template>

<script setup>
import { ref, computed, watch, onMounted} from 'vue'
const props = defineProps({
	orderId: {type: Number,default: 0},
	address: { type: String, default: ''}
})
const emit = defineEmits(['closeSelfPopup','confirmReach'])
const onExit=()=>{
	emit('closeSelfPopup')
}
const onConfirm=()=>{
	emit('confirmReach', props.orderId)
}


</script>

<style>
	
	

</style>


<style lang="scss" scoped>
	.server-container{
		width:90vw;
		background-color: #fff;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.header-box{
		width: 100%;
		height: 230upx;
		
	}
	.info-box{
		padding: 30upx 30upx 80upx 30upx;
	}
	
	.tip-txt{
		font-size: 38upx;
	}
	
	.msg{
		font-size: 30upx;
		color:#333;
		
	}
	
	.question-box{
		background-color: #efefef;
		border-radius: 10upx;
		padding: 20upx;
		box-sizing: border-box;
		font-size: 26upx;
	}
	
	.action-box{
		border-radius: 10upx;
		padding: 10upx;
		box-sizing: border-box;
		border-radius: 40upx;
		align-items: center;
		display: flex;
		position: relative;
		justify-content: center;
		font-size: 34upx;
	}
	
	.bcg{
		border: 1px solid #333;
		
	}
	
	.bcr{
		border: 1px solid red;
		
	}
	
	.mt-max{
		margin-top: 50upx;
	}
	
	.btn-icon {
	  position: absolute;
	  left: 6upx;                 /* 靠左 */
	  top: 50%;                /* 垂直居中 */
	  transform: translateY(-50%);
	  background-color:red;
	  width: 80upx;            /* 固定宽度 */
	  height: 60upx;           /* 固定高度 */
	  border-radius: 30upx;    /* 圆角可调 */
	  display: flex;
	  align-items: center;
	  justify-content: center;
	 
	 
	}
	
	.btn-icon image{
		width: 30upx;
		height: 30upx;
	}
	
	.arrow {
	  width: 40upx;
	  height: 40upx;
	}
	
	.btn-text {
	  color: #f33;
	  font-weight: bold;
	}
	
	
	
	
</style>